<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <!-- <el-col :span="6">
          <div class="totalBox">
            <div class="totalBoxTitle fl">危机预警</div>
            <div class="totalBoxIion totalBoxIion1 fr"></div>
            <div class="totalBoxData fl"></div>
            <div class="totalBoxBtn fl">
              <el-button type="primary" size="mini" plain>新增预警</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="totalBox">
            <div class="totalBoxTitle fl">预约信息</div>
            <div class="totalBoxIion totalBoxIion2 fr"></div>
            <div class="totalBoxData fl"></div>
            <div class="totalBoxBtn fl">
              <el-button type="primary" size="mini">点击前往</el-button>
            </div>
          </div>
        </el-col> -->
        <el-col :span="6">
          <div class="totalBox">
            <div class="totalBoxTitle fl">班级数量</div>
            <div class="totalBoxIion totalBoxIion3 fr"></div>
            <div class="totalBoxData fl">{{this.classNumber}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="totalBox">
            <div class="totalBoxTitle fl">学生数量</div>
            <div class="totalBoxIion totalBoxIion4 fr"></div>
            <div class="totalBoxData fl">{{this.studentNumber}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {APICLASSNUMBER} from '@/common/api.js'
export default {
  data () {
    return {
      classNumber: '',
      studentNumber: ''
    }
  },
  created () {
    this.dataFn()
  },
  methods: {
    dataFn () {
      APICLASSNUMBER().then((res) => {
        if (res.status === 1) {
          this.studentNumber = res.data.student_number + '人'
          res.data.class_number.forEach((element, index) => {
            this.classNumber += (element.title + element.class_number + '个')
            if (index < res.data.class_number.length - 1) {
              this.classNumber += '，'
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'src/assets/style/varibles.scss';
.center{
  background-color: #DAEDFF;
}
.totalBox{
  width: 100%;
  height: 14vh;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 1vh 1.5vw;
  box-sizing: border-box;
  .totalBoxTitle{
    width: 80%;
    font-size: $secondarySize;
    color: $mainFontColor;
  }
  .totalBoxIion{
    width: 27px;
    height: 27px;
    background: url(./../../../assets/image/home/dataIcon.png) no-repeat;
  }
  .totalBoxIion1{
    background-position: -2px -3px;
  }
  .totalBoxIion2{
    background-position: -54px -3px;
  }
  .totalBoxIion3{
    background-position: -101px -3px;
  }
  .totalBoxIion4{
    background-position: -151px -3px;
  }
  .totalBoxData{
    width: 100%;
    height: 3vh;
    line-height: 3vh;
    color: $secondaryFontColor;
    padding-left: 3px;
    box-sizing: border-box;
  }
  .totalBoxBtn{
    width: 100%;
    margin-top: 1vh;
  }
}
</style>
